<template>
  <lay-container :fluid="true" style="padding: 10px">
    <lay-row :span="24" style="display: flex">
      <lay-col style="max-width: 400px" :xs="24">

      </lay-col>
      <lay-col style="flex: 1; background-color: #fff" :xs="24">
        <lay-tab type="brief" v-model="activeTab">
          <lay-tab-item title="密码过期请先修改密码" id="baseInfo">
            <div class="tab-content">
              <lay-form
                :model="model4"
                ref="layFormRef4"
      
                size="sm"
                :rules="rules"
              >
                <!-- <lay-form-item label="账号" prop="username" required>
                  <lay-input v-model="model4.username" allow-clear></lay-input>
                </lay-form-item> -->
                <lay-form-item label="密码" prop="password" required>
                  <lay-input
                    v-model="model4.password"
                    type="password"
                    allow-clear
                  ></lay-input>
                </lay-form-item>
                <lay-form-item label="新密码" prop="newpassword" required>
                  <lay-input
                    v-model="model4.newpassword"
                    type="password"
                    allow-clear
                  ></lay-input>
                </lay-form-item>
                <lay-form-item label="确认密码" prop="confirmpassword" required>
                  <lay-input
                    v-model="model4.confirmpassword"
                    type="password"
                    allow-clear
                  ></lay-input>
                </lay-form-item>
                
                <!-- <lay-form-item label="性别" prop="sex">
                  <lay-select
                    v-model="model4.sex"
                    style="width: 100%"
                    placeholder="请选择性别"
                  >
                    <lay-select-option
                      value="man"
                      label="男"
                    ></lay-select-option>
                    <lay-select-option
                      value="woman"
                      label="女"
                    ></lay-select-option>
                  </lay-select>
                </lay-form-item>
                <lay-form-item label="邮箱" prop="email">
                  <lay-input
                    v-model="model4.email"
                    type="email"
                    allow-clear
                  ></lay-input>
                </lay-form-item>
                <lay-form-item label="个人简介" prop="desc">
                  <lay-textarea
                    placeholder="还没有个人简介哦~"
                    v-model="model4.desc"
                    allow-clear
                  ></lay-textarea>
                </lay-form-item>
                <lay-form-item label="联系电话" prop="phone" required>
                  <lay-input
                    v-model="model4.phone"
                    type="phone"
                    allow-clear
                  ></lay-input>
                </lay-form-item> -->
                <lay-form-item style="text-align: center">
                  <lay-button type="primary" @click="submit4">修改密码</lay-button>
   
                </lay-form-item>
              </lay-form>
            </div>
          </lay-tab-item>
          <!-- <lay-tab-item title="账号绑定" id="bindingInfo">
            <div class="tab-content" style="max-width: unset">
              <template v-for="item in bindingAccountList" :key="item.id">
                <div class="account-item">
                  <div
                    v-if="item.icon != ''"
                    style="width: 45px; display: inline-block"
                  >
                    <lay-icon
                      :type="item.icon"
                      :color="item.color"
                      size="34px"
                    ></lay-icon>
                  </div>
                  <div class="account-desc">
                    <div style="color: #000000e0">{{ item.title }}</div>
                    <div>{{ item.desc }}</div>
                  </div>
                  <div class="account-option">
                    {{ item.option }}
                  </div>
                </div>
              </template>
            </div>
          </lay-tab-item> -->
        </lay-tab>
      </lay-col>
    </lay-row>
  </lay-container>
</template>

<script lang="ts">
import { ref, reactive } from 'vue'
import { layer } from '@layui/layer-vue'
import webosutils from "webosutils";
import { useRouter } from 'vue-router'
// import { useUserStore } from "../../../store/user";
export default {
  setup() {
    const router = useRouter()
    // 定义验证规则  
const rules = {  
  newpassword: [  
    { required: true, message: '请输入密码', trigger: 'blur' },  
    {  
      pattern: /^(?=.*[a-zA-Z])(?=.*\d).{8,}$/,
      message: '必须包含至少8个字符,包括至少1个数字、至少1个字母',  
      trigger: 'blur'  
    }  
  ]  ,
  confirmpassword: [  
    { required: true, message: '请输入密码', trigger: 'blur' },  
    {  
      pattern: /^(?=.*[a-zA-Z])(?=.*\d).{8,}$/,
      message: '必须包含至少8个字符,包括至少1个数字、至少1个字母',  
      trigger: 'blur'  
    }  
  ]  
};  
  
  //  const userinfo = useUserStore();
    // const src = 'https://foruda.gitee.com/avatar/1677022544584087390/4835367_jmysy_1578975358.png'


    const activeTab = ref('baseInfo')

    const model4 = reactive({

      password: '',
      newpassword: '',
      confirmpassword: '',
      
    })

    const layFormRef4 = ref()

    const submit4 =  ()=> {
      debugger
      layFormRef4.value.validate((isValidate: any, model: any, errors: any) => {
          if(model.newpassword!==model.confirmpassword){
          layer.msg("新密码和确认密码不一致！");
          return false;
        }
      if (isValidate) {
     
        webosutils.http.post("/v1/api/users/changePwd", {password:model.password,newpassword:model.newpassword}).then((resp: any) => {
        if (resp.success) {
           
          layer.msg("密码修改成功！下次登录请使用新密码登录！");
          router.push('/login');
          return false;
          
        }else{
          layer.msg(resp.msg);
        }

      }).catch(() => {
        layer.msg("网络错误");
        //console.log("错误！");
      });
      }
    });


    }
  



    const clearValidate4 = () => {
      layFormRef4.value.clearValidate()
    }

    const reset4 = () => {
      layFormRef4.value.reset()
    }

    const bindingAccountList = ref([
      {
        id: 1,
        title: '密保手机',
        desc: '已绑定手机: 12345678901',
        option: '去修改',
        icon: ''
      },
      {
        id: 2,
        title: '密保邮箱',
        desc: '已绑定邮箱: email@layui-vue',
        option: '去修改',
        icon: ''
      },
      {
        id: 3,
        title: '密保问题',
        desc: '未设置密保问题',
        option: '去设置',
        icon: ''
      },
      {
        id: 4,
        title: '绑定QQ',
        desc: '当前未绑定QQ账号',
        option: '去绑定',
        icon: 'layui-icon-login-qq',
        color: '#3492ed'
      },
      {
        id: 5,
        title: '绑定微信',
        desc: '当前未绑定绑定微信账号',
        option: '去绑定',
        icon: 'layui-icon-login-wechat',
        color: '#4daf29'
      },
      {
        id: 6,
        title: '绑定微博',
        desc: '当前未绑定绑定微博账号',
        option: '去绑定',
        icon: 'layui-icon-login-weibo',
        color: '#e6162d'
      }
    ])
    return {
    //  src,
      model4,
      rules,
      activeTab,
      layFormRef4,
      bindingAccountList,
      reset4,
      submit4,
      clearValidate4,
      //userinfo
    }
  }
}
</script>

<style scoped>
.layui-tag .layui-tag-text {
  margin: 0 8px 8px 0;
}
.info-user {
  max-width: 400px;
  min-width: 320px;
  padding: 20px;
  margin-right: 10px;
}
.user-avatar {
  width: 40%;
  height: 40%;
}
.user-name {
  font-size: 24px;
  margin: 15px;
}
.user-briefing {
  color: #0006;
  font-size: 14px;
  margin-bottom: 10px;
}

.header-title {
  font-size: 20px;
  font-weight: 500;
  margin-top: 12px;
  margin-bottom: 20px;
}

.header-describe {
  font-size: 14px;
  margin-bottom: 12px;
}

.tab-content {
  height: 368px;
  /* max-width: 500px; */
  padding: 0 20px;
  background-color: #fff;
}
.account-item {
  display: flex;
  width: 99%;
  height: 41px;
  line-height: 43px;
  margin-right: 10px;
  padding: 12px 0;
  border-bottom: #ccc solid 1px;
}
.account-item:last-child {
  border-bottom: none;
}
.account-desc {
  flex: 1;
  color: #0006;
  line-height: 24px;
  display: inline-block;
}
.account-option {
  width: 45px;
  display: inline-block;
  color: var(--global-primary-color);
}
</style>